<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义布局 - Sortable.js</title>
    <!-- 引入 Sortable.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.15.2/Sortable.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #layout-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .sortable-list {
            list-style-type: none;
            padding: 0;
        }
        .layout-block {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 15px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            cursor: move; /* 拖拽光标 */
        }
        .layout-block input {
            flex: 1;
            padding: 8px;
            margin-right: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .layout-block button {
            padding: 8px 12px;
            background-color: #ff4d4d;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .layout-block button:hover {
            background-color: #cc0000;
        }
        #add-block, #save-layout {
            padding: 10px 20px;
            margin-top: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #add-block:hover, #save-layout:hover {
            background-color: #45a049;
        }
        .sortable-ghost {
            opacity: 0.5;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="layout-container">
        <h2>自定义布局</h2>
        <ul class="sortable-list">
            <li class="layout-block">
                <input type="text" placeholder="输入内容">
                <button type="button" class="remove-block">删除</button>
            </li>
        </ul>
        <button id="add-block">添加元素</button>
        <button id="save-layout">保存布局</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const sortableList = document.querySelector('.sortable-list');

            // 初始化 Sortable
            new Sortable(sortableList, {
                animation: 150, // 拖拽动画时长
                ghostClass: 'sortable-ghost', // 拖拽时的占位符样式
                onUpdate: function (event) {
                    console.log('布局顺序已更新');
                }
            });

            // 添加布局块
            document.getElementById('add-block').addEventListener('click', function () {
                const newBlock = document.createElement('li');
                newBlock.className = 'layout-block';
                newBlock.innerHTML = `
                    <input type="text" placeholder="输入内容">
                    <button type="button" class="remove-block">删除</button>
                `;
                sortableList.appendChild(newBlock);
            });

            // 删除布局块
            document.addEventListener('click', function (event) {
                if (event.target.classList.contains('remove-block')) {
                    event.target.parentElement.remove();
                }
            });

            // 保存布局
            document.getElementById('save-layout').addEventListener('click', function () {
                const layoutData = [];
                document.querySelectorAll('.layout-block input').forEach(function (input) {
                    layoutData.push(input.value);
                });
                console.log('布局数据：', layoutData); // 打印布局数据到控制台
                alert('布局已保存，查看控制台输出');
            });
        });
    </script>
</body>
</html>